<template>
  <div class="black-hole-wrap">
    <div class="black-hole"></div>
  </div>
</template>

<style lang="scss" scoped>
$orange: #c84100;
$yellow: #f7d681;

.black-hole-wrap {
  background: black;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

.black-hole {
  position: absolute;
  top: 34%;
  left: 46%;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 50% 47% 49% 45%;
  border: solid $yellow 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 12px $orange, inset 0 0 0 12px $orange, 0 0 50px $orange;
  border-bottom-width: 18px;
  border-right-width: 20px;
  filter: blur(10px) contrast(1.3);
}
</style>
